<template>
	<div class="shop-header-wrapper">
	  <div class="shop-header-main bottom-1px">
	  	<div class="back" @click="routerBack">
				<x-icon type="ios-arrow-left" size="30"></x-icon>
			</div>
			<div class="title flex-1">
				<slot></slot>
			</div>  	
	  	<div class="h-icon-right">
	  		<div ref="iconBox" v-if="isShowIcon" @click.stop="toggleShowNav">
					<span class="iconfont icon-fenlei1"></span>
				</div>
			</div>
			<ul class="header-nav" v-if="isShow">
		  	<router-link class="header-nav-item" :to="{ path: '/' }" tag="li">
		  		<i class="iconfont icon-shouye1"></i>
		  		<span class="text">首页</span>
		  	</router-link>
		  	<router-link class="header-nav-item" :to="{ path: '/category' }" tag="li">
		  		<i class="iconfont icon-fenlei"></i>
		  		<span class="text">分类搜索</span>
		  	</router-link>
		  	<router-link class="header-nav-item" :to="{ path: '/cart' }" tag="li">
		  		<i class="iconfont icon-gouwuchezhengchang"></i>
		  		<span class="text">购物车</span>
		  	</router-link>
		  	<router-link class="header-nav-item" :to="{ path: '/my' }" tag="li">
		  		<i class="iconfont icon-wode"></i>
		  		<span class="text">我的</span>
		  	</router-link>
		  	<router-link class="header-nav-item" :to="{ path: '/my/history' }" tag="li">
		  		<i class="iconfont icon-liulanjilu"></i>
		  		<span class="text">浏览记录</span>
		  	</router-link>
		  </ul>
	  </div>
  </div>
</template>

<script>
export default {
	props: {
		isShowIcon: {
			type: Boolean,
			default: true
		}
	},
	data () {
		return {
			isShow: false
		}
	},
  methods: {
  	routerBack () {
  		this.$router.go(-1)
  	},
  	toggleShowNav () {
  		this.isShow = !this.isShow
  	}
  },
  mounted () {
  	let that = this
  	document.onclick = function () {
  		that.isShow = false
  	}
  	document.onscroll = function () {
  		that.isShow = false
  	}
  }
}
</script>

<style scoped>
.shop-header-wrapper {
	height: 46px;
}
.shop-header-main {
	position: fixed;
  top: 0;
  width: 100%;
  max-width: 640px;
  display: flex;
  padding: 8px 15px;
  z-index: 99;
  align-items: center;
  height: 46px;
  background: #fff;
}
.bottom-1px:after {
	border-color: #eaeaea;
}
.back {
	margin-left: -10px;
	margin-right: 10px;
	align-items: center;
	height: 30px;
}
.back svg{
	fill: #787878;
}
.title {
	height: 30px;
	text-align: center;
}
.title h2{
	font-size: 16px;
	line-height: 30px;
	color: #333;
}
.flex-1 {
	flex: 1;
	align-items: center;
}
.h-icon-right {
	width: 30px;
	height: 30px;
	align-items: center;
	text-align: right;
}
.h-icon-right span {
	font-size: 22px;
	line-height: 28px;
}
.header-nav {
  position: absolute;
  top: 53px;
  right: 10px;
  z-index: 1000;
  border-radius: 4px;
  width: 125px;
  background: rgba(0,0,0,.9);
}
.header-nav:before {
  position: absolute;
  top: -5px;
  right: 5px;
  width: 10.5px;
  height: 5px;
  background: url() no-repeat center center;
  background-size: 100% 100%;
  content: "";
}
.header-nav-item {
  display: block;
  position: relative;
  margin-left: 40px;
  border-bottom: 1px solid rgba(255,255,255,.2);
  height: 40px;
  line-height: 40px;
  z-index: 1000;
}
.header-nav-item .iconfont{
	text-align: center;
  position: absolute;
  top: 0;
  left: -40px;
  width: 40px;
  height: 40px;
  font-size: 16px;
  color: #f1f1f1;
}
.text {
	color: #fff;
}
</style>
